<template>
	<view>
		<div class="goods-list">
			<div class="goods-item"
				v-for="(item, item_index) in res" :key="item_index">
				<div class="goods-img">
					<u-image :src="item.img" height="468rpx" mode="aspectFill	" width="100%">
						<u-loading slot="loading"></u-loading>
					</u-image>
				</div>
				<div class="goods-desc">
					<div class="goods-title u-line-2">
						{{ item.title }}
					</div>
					<!-- <div class="goods-bottom">
		        <div class="goods-price">￥{{ item.price | unitPrice }}</div>
		      </div> -->
					<div>
						<text class="deadline_label u-m-r-10">距结束</text>
						<text class="deadline_time"> 5天 21:10:54</text>
					</div>
					<div class="u-flex u-row-between u-p-10 collect">
						<div>
							<u-icon name="star" color="#979797" class="u-m-r-10"></u-icon>
							999
						</div>
						<div>
							<u-icon name="account" color="#979797" class="u-m-r-10"></u-icon>
							999
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		props: ["res"],
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
.goods-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.goods-item {
  width: 50%;
  margin-bottom: 10px;
  border-radius: 0.4em;
  overflow: hidden;
}

.goods-img {
  position: relative;
  margin: 0 auto;
  // width: 158px;
  width: 94%;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  overflow: hidden;
  > img {
    width: 100%;
    height: 100%;
  }
}

.goods-desc {
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  width: 94%;
  background: #fff;
  padding: 8rpx 0 8rpx 8rpx;
  margin: 0 auto;
  > .goods-title {
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #010103;
  }

  > .goods-bottom {
    display: flex;
    font-weight: bold;
    > .goods-price {
      line-height: 2;
      color: $main-color;
    }
  }
}

.goods-icon {
  right: 10rpx;
  top: 10rpx;
  position: absolute;
}
.deadline_label {
  width: 70px;
  height: 26px;
  background: #fa6c3e;
  line-height: 26px;
  font-size: 18rpx;
  font-family: PingFangSC-Light, PingFang SC;
  font-weight: 300;
  color: #ffffff;
}
.deadline_time {
  height: 26rpx;
  font-size: 18rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fa6c3e;
  line-height: 26rpx;
  background: #fff6eb;
  border-radius: 4rpx;
}
.collect {
  font-size: 20rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
}
</style>
